<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>综合比较</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="./plugins/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="./css/main.css">
  <style>
    .control-label {
      margin-right:10px;
      min-width:60px;
      text-align: right;
    }
    .form-inline .form-group {
      margin-right:20px;
      margin-bottom:10px;
    }
    .radio-beauty {
      margin-right:10px;
      margin-top:-10px;
      border-radius: 4px;
    }
    .radio-beauty input {
      width: 80px;
      height: 32px;
      position: absolute;
      opacity: 0;
      cursor: pointer;
    }

    .radio-beauty .radio-btn {
      border: none;
      outline: none;
      width: 80px;
      height: 32px;
      background: #f3f3f3;
      color: #333;
    }

    .radio-beauty input:checked+.radio-btn {
      background-color: #2B9DF8;
      color: #fff;
      border-radius: 4px;
    }
    .tab-navs {
      margin-top:10px;
      margin-left:15px;
    }
    .tab-navs li {
      float:left;
      height:32px;
      line-height:32px;
      background-color:#ccc7c7;
      color:#333;
      padding:0 30px;
      position: relative;
      overflow: hidden;
      margin-left:-14px;
      cursor: pointer;
    }
    .tab-navs li.active {
      background-color:#2B9DF8;
      color:#fff;
    }
    .tab-navs li .left-side {
      position: absolute;
      width:32px;
      height:32px;
      left:-20px;
      background:#fff;
      transform: rotate(45deg);

    }
    .tab-navs li .cneter-content {
      background-color:#ccc7c7;
      padding-right:30px;
      position: relative;
      z-index:10;
    }
    .tab-navs li .right-side {
      position: absolute;
      width:32px;
      height:32px;
      right:20px;
      top:0;
      z-index: 2;
      transform: rotate(45deg);
      background-color:#ccc7c7;
    }
    .tab-navs li:before {
      content:'';
      width:30px;
      height:32px;
      position: absolute;
      right:0;
      top:0;
      z-index:1;
      background-color:#fff;
    }
    .tab-navs li.active .right-side {
      background:#2B9DF8;
      
    }
    .tab-navs li.active .cneter-content {
      background-color:#2B9DF8;
    }
    tr.c-tr.active td {
      background-color:#f8d4a8;
    }
  </style>
</head>
<body>
  <div class="content">
    <div class="box">
      <div class="box-header">
        <div class="header-title">综合比较</div>
      </div>
      <div class="box-body">
        <form class="form-inline">
          <div class="form-group">
            <label class="control-label">行业</label>
            <select name="" id="" class="form-control">
              <option value="1">win行业</option>
            </select>
          </div>
          <div class="form-group">
            <label class="control-label">市场</label>
            <select name="" id="" class="form-control">
              <option value="1">沪深</option>
              <option value="2">中证500</option>
            </select>
          </div>
          <label for="" class="radio-beauty">
            <input type="checkbox" name="status" value="1" checked>
            <button class="radio-btn">数据表格</button>
          </label>
          <label for="" class="radio-beauty">
            <input type="checkbox" name="status" value="2">
            <button class="radio-btn">图形表格</button>
          </label>
          <label for="" class="radio-beauty">
            <input type="checkbox" name="status" value="3">
            <button class="radio-btn">综合分析</button>
          </label>
          <div class="form-group">
            <label class="control-label">可比公司</label>
            <select name="" id="" class="form-control">
              <option value="1">市场最高10家</option>
            </select>
          </div>
          <div class="form-group">
            <label class="control-label">分组</label>
            <select name="" id="" class="form-control">
              <option value="1">按市场分组</option>
            </select>
          </div>
          <div class="form-group">
            <label class="control-label">统计数据</label>
            <select name="" id="" class="form-control">
              <option value="1">中位值</option>
              <option value="1">平均值</option>
            </select>
          </div>
          <div class="form-group">
            <label class="control-label">币种</label>
            <select name="" id="" class="form-control">
              <option value="1">CNY</option>
            </select>
          </div>
          <div class="form-group">
            <label class="control-label">单位</label>
            <select name="" id="" class="form-control">
              <option value="1">万元</option>
            </select>
          </div>
        </form>
        <ul class="tab-navs clearfix">
          <li class="nav-item active" style="z-index:1">
            <div class="left-side"></div>
            <div class="cneter-content">信息技术1</div>
            <div class="right-side"></div>
          </li>
          <li class="nav-item" style="z-index:2">
            <div class="left-side"></div>
            <div class="cneter-content">信息技术2</div>
            <div class="right-side"></div>
          </li>
          <li class="nav-item" style="z-index:3">
            <div class="left-side"></div>
            <div class="cneter-content">信息技术3</div>
            <div class="right-side"></div>
          </li>
          <li class="nav-item" style="z-index:4">
            <div class="left-side"></div>
            <div class="cneter-content">信息技术4</div>
            <div class="right-side"></div>
          </li>
        </ul>
        <table class="table table-border" id="table">
          <thead>
            <tr>
              <th>排名</th>
              <th>代码</th>
              <th>证券简称</th>
              <th>最新收盘日</th>
              <th>最新收盘价(原始币种)</th>
              <th>总市值(万元)</th>
              <th>总收入(LYR,万元)</th>
              <th>净利润(LYR,万元)</th>
              <th>净利润(最近100啥)</th>
              <th>ROE(%)</th>
            </tr>
          </thead>
          <tbody>
            <tr id="11111"class="c-tr">
              <td>1</td>
              <td>400084.NQ</td>
              <td>乐视网</td>
              <td>2021-05-14</td>
              <td class="ar">0.51</td>
              <td class="ar">234,456,789</td>
              <td class="ar">45,456,97</td>
              <td class="ar">-249,094,54</td>
              <td class="ar">-.0.88</td>
              <td class="ar">15%</td>
            </tr>
            <tr id="22222"class="c-tr">
              <td>2</td>
              <td>400084.NQ</td>
              <td>bilibi</td>
              <td>2021-05-14</td>
              <td class="ar">0.51</td>
              <td class="ar">234,456,789</td>
              <td class="ar">45,456,97</td>
              <td class="ar">-249,094,54</td>
              <td class="ar">-.0.88</td>
              <td class="ar">15%</td>
            </tr>
            <tr id="33333"class="c-tr">
              <td>2</td>
              <td>400084.NQ</td>
              <td>bilibi</td>
              <td>2021-05-14</td>
              <td class="ar">0.51</td>
              <td class="ar">234,456,789</td>
              <td class="ar">45,456,97</td>
              <td class="ar">-249,094,54</td>
              <td class="ar">-.0.88</td>
              <td class="ar">15%</td>
            </tr>
            <tr id="44444"class="c-tr">
              <td>2</td>
              <td>400084.NQ</td>
              <td>bilibi</td>
              <td>2021-05-14</td>
              <td class="ar">0.51</td>
              <td class="ar">234,456,789</td>
              <td class="ar">45,456,97</td>
              <td class="ar">-249,094,54</td>
              <td class="ar">-.0.88</td>
              <td class="ar">15%</td>
            </tr>
            <tr id="55555"class="c-tr">
              <td>2</td>
              <td>400084.NQ</td>
              <td>bilibi</td>
              <td>2021-05-14</td>
              <td class="ar">0.51</td>
              <td class="ar">234,456,789</td>
              <td class="ar">45,456,97</td>
              <td class="ar">-249,094,54</td>
              <td class="ar">-.0.88</td>
              <td class="ar">15%</td>
            </tr>
            <tr id="66666"class="c-tr">
              <td>2</td>
              <td>400084.NQ</td>
              <td>bilibi</td>
              <td>2021-05-14</td>
              <td class="ar">0.51</td>
              <td class="ar">234,456,789</td>
              <td class="ar">45,456,97</td>
              <td class="ar">-249,094,54</td>
              <td class="ar">-.0.88</td>
              <td class="ar">15%</td>
            </tr>
          </tbody>
        </table>
        
      </div>
    </div>
  </div>
  
  <script src="plugins/jquery/jquery.min.js"></script>
  <script src="js/echarts.js"></script>
  <script>
    $(function() {
      $('#table').on('click', 'tbody tr.c-tr', function() {
        var currId = $(this).attr('id')
        $(this).toggleClass('active')
        var $next = $(this).next('.table_expanded_tr')
        if($next && $next.length > 0) {
          $('.table_expanded_tr_'+currId+'').toggle()
        }else {
          var expandedTrStr = '<tr class="table_expanded_tr table_expanded_tr_'+currId+'">'+
                              '<td colspan="3">全国股转系统(1)</td>'+
                              '<td colspan="7"> </td>'+
                            '</tr>'+
                            '<tr class="table_expanded_tr table_expanded_tr_'+currId+'">'+
                              '<td colspan="3" class="ar">中位值</td>'+
                              '<td></td>'+
                              '<td></td>'+
                              '<td class="ar">234,456,789</td>'+
                              '<td class="ar">45,456,97</td>'+
                              '<td class="ar">-249,094,54</td>'+
                              '<td class="ar">-.0.88</td>'+
                              '<td class="ar">15%</td>'+
                            '</tr>'+
                            '<tr class="table_expanded_tr table_expanded_tr_'+currId+'">'+
                              '<td colspan="3" class="ar">平均值</td>'+
                              '<td></td>'+
                              '<td></td>'+
                              '<td class="ar">234,456,789</td>'+
                              '<td class="ar">45,456,97</td>'+
                              '<td class="ar">-249,094,54</td>'+
                              '<td class="ar">-.0.88</td>'+
                              '<td class="ar">15%</td>'+
                            '</tr>'+
                            '<tr class="table_expanded_tr table_expanded_tr_'+currId+'">'+
                              '<td colspan="3">沪深(10)</td>'+
                              '<td colspan="7"> </td>'+
                            '</tr>'+
                            '<tr class="table_expanded_tr table_expanded_tr_'+currId+'">'+
                              '<td colspan="3" class="ar">中位值</td>'+
                              '<td></td>'+
                              '<td></td>'+
                              '<td class="ar">234,456,789</td>'+
                              '<td class="ar">45,456,97</td>'+
                              '<td class="ar">-249,094,54</td>'+
                              '<td class="ar">-.0.88</td>'+
                              '<td class="ar">15%</td>'+
                            '</tr>'+
                            '<tr class="table_expanded_tr table_expanded_tr_'+currId+'">'+
                              '<td colspan="3" class="ar">平均值</td>'+
                              '<td></td>'+
                              '<td></td>'+
                              '<td class="ar">234,456,789</td>'+
                              '<td class="ar">45,456,97</td>'+
                              '<td class="ar">-249,094,54</td>'+
                              '<td class="ar">-.0.88</td>'+
                              '<td class="ar">15%</td>'+
                            '</tr>'
          var $expandedTr = $(expandedTrStr)  
          $(this).after($expandedTr)
        }
      })
    })
  </script>
  <script src="plugins/jquery/jquery.min.js"></script>
  <script>
    $('.tab-navs').on('click', 'li', function() {
      $(this).addClass('active').siblings().removeClass('active')
    })
  </script>
</body>
</html>